{extend name="/base/base"}
{block name="content"}
    <div class="layui-carousel mb-30" id="carousel">
        <div carousel-item>
            {foreach $carousel as $item}
                <div>
                    <a href="{$item['link']}" title="{$item['title']}">
                        <img src="{$item['pic_path']}" title="{$item['title']}">
                    </a>
                </div>
            {/foreach}
        </div>
    </div>
    <div class="panel">
        <div class="panel-hand">
            <div class="title">最新发布</div>
            <a href="{:url('index/article/table')}" class="float-right more">更多</a>
        </div>
        <div class="panel-body">
            <ul id="ul">
            </ul>
        </div>
    </div>
    <div class="cm-node" id="tpl" style="display: none">
        {{#  layui.each(d, function(index, item){ }}
        <li class="chunk">
            <h1><a href="{{item.url}}">{{item.title}}</a></h1>
            <p class="content">
                {{item.describe}}
            </p>
            <p class="label">
                <span>
                    <i class="fa fa-user-o"></i>
                    cxcsz
                </span>
                <span>
                    <i class="fa fa-eye"></i>
                    {{item.read_num}}
                </span>
                <!--<span>
                    <i class="fa fa-thumbs-o-up"></i>
                    100
                </span>
                <span>
                    <i class="fa fa-comment-o"></i>
                    100
                </span>-->
                <span>
					<i class="fa fa-clock-o"></i>
                    {{item.create_date}}
				</span>
            </p>
            <p class="tags">
                tags:
                {{#
                var tag_class = [
                '',
                'layui-bg-orange',
                'layui-bg-green',
                'layui-bg-cyan',
                'layui-bg-blue',
                'layui-bg-black',
                'layui-bg-gray',
                ];
                layui.each(item.tags, function(key, value){ }}
                <a href="/index/article/tag/{{key}}" class="layui-badge {{tag_class[key%7]}}">{{value}}</a>
                {{#  }); }}
            </p>
        </li>
        {{#  }); }}
    </div>
{/block}
{block name="js"}
<script>
    layui.use(['carousel','element','jquery','layer','laytpl'], function(){
        var carousel = layui.carousel,
            $ = layui.jquery,
            layer = layui.layer,
            laytpl = layui.laytpl,
            count = 0;
        //建造实例
        carousel.render({
            elem: '#carousel',
            width: '100%', //设置容器宽度
            arrow: 'always', //始终显示箭头
            anim: 'default', //切换动画方式
            autoplay: true, //是否自动切换
        });

        // 获取填充右侧数据
        var base = {:$base},
            right_tag = '',
            right_month = '',
            right_category = '',
            tag_class = [
                '',
                'layui-bg-orange',
                'layui-bg-green',
                'layui-bg-cyan',
                'layui-bg-blue',
                'layui-bg-black',
                'layui-bg-gray',
            ];
        $.each(base.right_tag, function(index, item){
            right_tag += '<a href="'+item.url+'" class="layui-badge '+tag_class[index%7]+'">'+item.name+'('+item.num+')</a>'+"\r\n";
        });
        $('#right-tag').html(right_tag);
        $.each(base.right_month, function (index, item) {
            right_month +=
                "                            <li>\n" +
                "                                <a class='hg-30' href=\""+item.url+"\">"+item.name+"\n" +
                "                                    <span class=\"float-right\">"+item.num+"篇</span>\n" +
                "                                </a>\n" +
                "                            </li>\n";
        });
        $('#right-month').html(right_month);

        $.each(base.right_category, function (index, item) {
            right_category +=
                "                            <li>\n" +
                "                                <a class='hg-30' href=\""+item.url+"\">"+item.name+"\n" +
                "                                    <span class=\"float-right\">"+item.num+"篇</span>\n" +
                "                                </a>\n" +
                "                            </li>\n";
        });
        $('#right-category').html(right_category);


        update({curr:1,limit:5});

        function update(obj) {
            obj.type = "time";
            obj.value = "id desc";
            $.ajax({
                url: "{:url('index/article/tableHandle')}",
                type: "POST",
                // contentType: "application/json;charset=utf-8", // 上传内容的格式
                data: obj, // {id:data.id}
                dataType: "json", // 返回的数据格式
                async: false, // 不开启异步执行获取数据
                success: function (res) {
                    if (res.code == 0) {
                        var ul = document.getElementById('ul'),
                            getTpl = tpl.innerHTML,
                            data = {};
                        data = res.result.list;
                        count = res.result.count;
                        laytpl(getTpl).render(data, function(html) {
                            ul.innerHTML = html;
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg(data.msg, {icon: 2});
                }
            })
        }



    });

</script>
{/block}